<template>
    <div class="c-table">
        <!-- 表头 -->
        <div class="c-table-head">
            <!-- 查询条件 -->
            <a-form v-if="openSearch" layout="inline" :form="queryForm" @submit="handleSubmit" class="c-table-head-form">
                <slot name="headerFormItem" />
                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                    <a-button icon="reload" style="margin-left: 10px;" @click="resetQueryForm">重置</a-button>
                </a-form-item>
            </a-form>
            <!-- 操作按钮 -->
            <div class="c-table-head-operators">
                <slot name="headerOperators" />
            </div>
        </div>
        <!-- 表格主体 -->
        <div class="c-table-body">
            <a-table
                :data-source="dataList"
                :row-key="rowKey"
                :pagination="pagination"
                :size="size"
                :bordered="false"
                @change="pagingQuery">
                <!-- 列 -->
                <slot name="columns" />
            </a-table>
        </div>
    </div>
</template>

<script>
    export default {
        props : {
            //  表格大小
            size : { type : String, default : 'default' },
            //  获取主键,默认取id字段
            rowKey : { type : Function, default : record => record['id'] },
            //  是否开启分页
            openPage : { type : Boolean, default : true },
            //  是否开启搜索
            openSearch : { type : Boolean, default : true },
            //  API接口,必填
            apiInterface : { type : Function, required : true }
        },
        data(){
            return {
                //  查询条件表单
                queryForm : this.$form.createForm(this),
                //  数据
                dataList : [],
                //  分页对象
                pagination : {
                    //  是否可以改变 pageSize
                    showSizeChanger : this.openPage,
                    //  是否可以快速跳转至某页
                    showQuickJumper : true,
                    //  当前页码,每页行数,总记录数
                    current : 1,
                    pageSize : 10,
                    total : 0
                }
            };
        },
        mounted() {
            //  获取数据
            this.getDataList();
        },
        watch : {
            '$route' : function () {
                this.getDataList()
            }
        },
        methods : {
            //  重置表单
            resetQueryForm : function(e){
                e.preventDefault();
                //  清空查询条件
                this.queryForm.resetFields();
                this.$router.push({ name : this.$route.name, query : { }}).then();
            },
            //  监听查询条件表单提交事件
            handleSubmit : function(e){
                e.preventDefault();
                let $this = this;
                $this.queryForm.validateFields((err, params) => {
                    if (!err){
                        //  整合已有的查询条件
                        params = Object.assign({},this.$route.query,params);
                        //  清空分页条件
                        delete params['current'];
                        delete params['size'];
                        params['t'] = Date.now().toString();
                        $this.$router.push({ name : this.$route.name, query : params }).then();
                    }
                });
            },
            //  分页查询
            pagingQuery : function (pagination) {
                let params = {
                    current : pagination.current,
                    size : pagination.pageSize
                };
                params = Object.assign({},this.$route.query,params);
                this.$router.push({ name : this.$route.name, query : params }).then();
            },
            //  查询数据列表
            getDataList : function () {
                let $this = this;
                let params = $this.$route.query;
                //  清空旧数据
                $this.dataList.splice(0,$this.dataList.length);
                //  获取数据
                $this.apiInterface(params).then(res => {
                    if ($this.openPage){
                        $this.dataList = res.data['records'];
                        $this.pagination.current = parseInt(res.data['current']);
                        $this.pagination.pageSize = parseInt(res.data['size']);
                        $this.pagination.total = parseInt(res.data['total']);
                    } else {
                        $this.dataList = res.data;
                        $this.pagination.pageSize = res.data.length;
                        $this.pagination.total = res.data.length;
                    }
                })
            },
            //  删除元素
            deleteDataItem : function (params) {
                let index = this.dataList.indexOf(params);
                if (index > -1){
                    this.dataList.splice(index,1);
                    //  列表为空时,则刷新一次
                    if (this.dataList.length === 0){
                        this.getDataList();
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .c-table .c-table-head{
        margin-bottom: 10px;
    }
    .c-table-head .c-table-head-form{
        margin-bottom: 10px;
    }
</style>
